<template>

    <tr class="cartList">
      <td><input type="checkbox" :checked="item.checked" @change="checkedFn" /></td>
      <td>{{ item.name }}</td>
      <td>{{ item.price }}￥</td>
      <td>
        <button @click="btnClick(-1)">-</button>
        {{ item.num }}
        <button @click="btnClick(1)">+</button>
      </td>
      <td>{{ item.price * item.num }}￥</td>
      <td><button @click="deleteFn(index)">删除</button></td>
    </tr>

</template>

<script>
export default {
  props: {
    item: Object,
    index: Number
  },
  data () {
    return {}
  },

  created () {},

  methods: {
    btnClick (num) {
      console.log(this.index)
      const newCount = this.item.num + num
      if (newCount < 1) return

      this.$store.dispatch('cart/updateCount', {
        count: newCount,
        id: this.index
      })
    },
    deleteFn () {
      this.$store.dispatch('cart/delItemData', {
        id: this.index
      })
    },
    checkedFn () {
      this.$store.dispatch('cart/UpDateChecked', {
        id: this.index
      })
    }
  }
}
</script>

<style scoped>
.cartList{
  text-align: center;
}
</style>
